<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>医生详情</title>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/cw.css"/>
	<link href="../css/mui.imageviewer.css" rel="stylesheet" />
	<style>
		#msg-list {
				height: 100%;
				overflow: auto;
				-webkit-overflow-scrolling: touch;
			}
			.msg-item {
				padding: 8px;
				clear: both;
			}
			.msg-item .mui-item-clear {
				clear: both;
			}
			.msg-item .msg-user {
				width: 38px;
				height: 38px;
				border: solid 1px #d3d3d3;
				display: inline-block;
				background: #fff;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				padding: 3px;
				color: #ddd;
			}
			
			.msg-item .msg-user-img-friend{
				width: 38px;
				height: 38px;
				display: inline-block;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				color: #ddd;
			}
			.msg-item .msg-user-img-self{
				width: 38px;
				height: 38px;
				display: inline-block;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: right;
				color: #ddd;
			}
			.msg-item .msg-content {
				display: inline-block;
				border-radius: 5px;
				border: solid 1px #d3d3d3;
				background-color: #FFFFFF;
				color: #333;
				padding: 8px;
				vertical-align: top;
				font-size: 15px;
				position: relative;
				margin: 0px 8px;
				max-width: 75%;
				min-width: 35px;
				float: left;
			}
			.msg-item .msg-content .msg-content-inner {
				overflow-x: hidden;
			}
			.msg-item .msg-content .msg-content-arrow {
				position: absolute;
				border: solid 1px #d3d3d3;
				border-right: none;
				border-top: none;
				background-color: #FFFFFF;
				width: 10px;
				height: 10px;
				left: -5px;
				top: 12px;
				-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}
			.msg-item-self .msg-user,
			.msg-item-self .msg-content {
				float: right;
			}
			.msg-item-self .msg-content .msg-content-arrow {
				left: auto;
				right: -5px;
				-webkit-transform: rotateZ(225deg);
				transform: rotateZ(225deg);
			}
			.msg-item-self .msg-content,
			.msg-item-self .msg-content .msg-content-arrow {
				background-color: #4CD964;
				color: #fff;
				border-color: #2AC845;
			}
			.time{width: 100%; text-align: center;padding: 2px;color: gray;font-size: 14px;}
			
			.frien_img img{width: 45px;height: 45px;border-radius: 100%;}
			
			.chamber-comment-nav div:nth-child(1){width: 15%;padding: 3px 16px;}
			.chamber-comment-nav div:nth-child(2){width: 65%;float: left;}
			.chamber-comment-nav div:nth-child(3){width: 20%;float: left;padding: 0 10px 0 7px;}
			.chamber-comment-nav{padding: 0px;background: white;}
			.alert{height:130px;background-color: white;padding: 20px 0px;}
			.dis{display:none;}
			.nav-bar-footer{bottom: 0;position: fixed;width: 100%;height: 50px;padding: 9px 0;}
			.gray{font-size: 28px;padding: 0px;}
			textarea{margin-bottom: 0;height: 35px;padding: 6px 11px;}
			.canmera{width: 40px;height: 40px;}
			#msg-list{padding-bottom: 150px;}
	</style>
	</head>

	<body contextmenu="return false;">
		<header id="header" class="mui-bar mui-bar-nav">
			<i class="mui-icon mui-icon-back mui-action-back"></i>
			<h1 class="mui-title ">在线留言</h1>
		</header> 
		<div id="content" class="mui-content">
<!--		<pre id='h'></pre>-->
		<script id='msg-template' type="text/template">
			<% for(var i in record){ var item=record[i]; %>
				<div class="msg-item <%= (item.sender=='self'?' msg-item-self':'') %>" msg-type='<%=(item.type)%>' msg-content='<%=(item.content)%>'>
					<% if(item.sender=='self' ) { %>
						<i class="msg-user mui-icon mui-icon-person"></i>
					<% } else { %>
						<img class="msg-user-img" src="../images/logo.png" alt="" />
					<% } %>
					<div class="msg-content">
						<div class="msg-content-inner">
							<% if(item.type=='text' ) { %>
								<%=( item.content|| '&nbsp;&nbsp;') %>
							<% } else if(item.type=='image' ) { %>
								<img class="msg-content-image" src="<%=(item.content)%>" style="max-width: 100px;" />
							<% } else if(item.type=='sound' ) { %>
								<span class="mui-icon mui-icon-mic" style="font-size: 18px;font-weight: bold;"></span>
								<span class="play-state">点击播放</span>
							<% } %>
						</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>
			<% } %>
		</script>
		<div id="loadHistory" style="display: none;text-align: center;"><img src="../images/loading.gif" style="width: 20px;"></div>
		<div id='msg-list'>
		</div>
		<nav class="nav-bar nav-bar-footer chamber-comment-nav">
			<div class="plus mui-pull-left">
			    <p><i class="mui-icon iconfont gray">+</i></p>
			</div>
			<div>
				<textarea id='msg-text' type="text" class='input-text'></textarea>
			</div>		
			<div>
				<button type="button" class="mui-btn sendMessage">发送</button>
			</div>
	     	<div class="alert dis">
				<div class="photo" style="width: auto;position:absolute;margin-top: 27px;text-align: center;">
				   	<i class="mui-icon iconfont yj" style="color:#EC971F;font-size: 2.7em;">&#xe626;</i>
				     <p>图片</p>
				</div>
				<div class="paizhao" style="display: block;margin-left: 70px;margin-top: 30px;width: auto;position: absolute;">
					<img class="canmera" src="../images/ppp.png"/>
				    <p style="text-align: center;">拍照</p>
				</div>
		    </div>
	  	</nav>
		</div>   
	    <script src="../js/jquery-2.1.4.min.js"></script>
	    <script src="../js/mui.min.js"></script>
		<script src="../js/mui.imageViewer.js"></script>
		<script src="../js/arttmpl.js"></script>
		<script type="text/javascript" src="../js/public.js" ></script>
		<script type="text/javascript" src="../js/app/home-chat.js" ></script>
		<script type="text/javascript" src="../js/im_chat.js" ></script>
		<script type="text/javascript" charset="utf-8">
			$('.plus').on('click',function(){
				$('.chamber-comment-nav').css('height','50px');
				if($('.alert').hasClass('dis')){ 
					$('.chamber-comment-nav').css('height','130px');
					$('.alert').removeClass('dis');
				}else{
					$('.chamber-comment-nav').css('height','50px');
					$('.alert').addClass('dis');
				}
			});
			$('#msg-text').on('click', function(){
				$('.alert').addClass('dis');
				$('.chamber-comment-nav').css('height','50px');
			})
			
		</script>
	</body>
	
</html>